/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-09-26 17:22:04
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-09-26 17:36:53
 * @FilePath: /react18-vite-admin/src/components/ui/LayoutSelect/LayoutSelect.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Tooltip } from 'antd';

import { useSettingsStore } from '@/store';

import './LayoutSelect.scoped.scss';
const LayoutSelect = () => {
    const { layout, setLayout, cssVarObject } = useSettingsStore((state) => state);

    const changeLayout = (val: AppLayout) => {
        setLayout(val);
    };

    return (
        <div className="flex flex-wrap justify-around w-full h-12" style={cssVarObject}>
            <Tooltip title="左侧模式" placement="bottom">
                <div
                    className={`layout-item left ${
                        layout === 'left' ? 'is-active' : ''
                    }`}
                    onClick={() => changeLayout('left')}
                >
                    <div></div>
                    <div></div>
                </div>
            </Tooltip>
            <Tooltip title="顶部模式" placement="bottom">
                <div
                    className={`layout-item top ${
                        layout === 'top' ? 'is-active' : ''
                    }`}
                    onClick={() => changeLayout('top')}
                >
                    <div></div>
                    <div></div>
                </div>
            </Tooltip>

            <Tooltip title="混合模式" placement="bottom">
                <div
                    className={`layout-item mix ${
                        layout === 'mix' ? 'is-active' : ''
                    }`}
                    onClick={() => changeLayout('mix')}
                >
                    <div></div>
                    <div></div>
                </div>
            </Tooltip>
        </div>
    );
};

export default LayoutSelect;
